<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <canvas id="c" width="300" height="300" style="border: 1px solid #ccc"></canvas>

        <script>
            const cnv = document.getElementById('c')
            const cxt = cnv.getContext('2d')

            // 外层矩形
            cxt.moveTo(50, 50)
            cxt.lineTo(250, 50)
            cxt.lineTo(250, 250)
            cxt.lineTo(50, 250)
            cxt.closePath()
            cxt.fillStyle = 'pink'
            cxt.fill()
            cxt.beginPath()
            // 内层矩形
            cxt.fillStyle = 'red'
            cxt.moveTo(100, 100)
            cxt.lineTo(200, 100)
            cxt.lineTo(200, 200)
            cxt.lineTo(100, 200)
            cxt.closePath()
            cxt.fill()

            // 在使用 fill() 方法填充时，需要注意一个规则：非零环绕填充。

            // 在使用 moveTo 和 lineTo 描述图形时，如果是按顺时针绘制，计数器会加1；如果是逆时针，计数器会减1。

            // 当图形所处的位置，计数器的结果为0时，它就不会被填充。
        </script>
    </body>
</html>
